import { defineComponent, provide, computed, toRef } from 'vue'

export const configProviderProps = {
  theme: {
    type: String,
    default: 'light'
  }
} as const

const configProvider = defineComponent({
  name: 'XConfigProvider',
  props: configProviderProps,
  setup(props) {
    const theme = toRef(props, 'theme')
    provide('configProviderOptions', {
      theme
    })

    const updateTheme = () => {
      theme.value = 'dark'
    }
    return { theme, updateTheme }
  },
  render() {
    const { $slots } = this
    return <div>{$slots.default?.()}</div>
  }
})

export default configProvider
